/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    Toolbar,
    useTheme,
    Button,
    Container,
    IconCloud,
    InputLine,
    Input,
    useToast,
    SuffixInput,
    IconSearch,
    IconButton,
    IconCoffee,
    IconZapOff,
    IconCheckSquare, DdMenuItem,
} from "customize-easy-ui-component";
import food from "../images/food.svg";
import { Link as RouterLink } from "../routing/Link";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import {IspGuideQuery} from "./__generated__/IspGuideQuery.graphql";
import {AloneContainer} from "../comp/AloneContainer";
import OldReportEntrance from "./OldReportEntrance";
import useClipboard from "react-use-clipboard";

const graphql = require("babel-plugin-relay/macro");

interface IspGuideProps {
    id?: string;
    prepared: {
        query: PreloadedQuery<IspGuideQuery>;
    }
    children: React.ReactNode;
    routeData: any;
}

export default function IspGuide(props: IspGuideProps) {
    const toast = useToast();
    //getISP(id: $id) 可以用 node( id )替换! 没必要搞那么多接口函数啊。node() 替换掉：getISP(id: $id) {}
    const data = usePreloadedQuery<IspGuideQuery>(
        graphql`
            query IspGuideQuery($id: ID!) {
                node(id: $id) {
                    id,
                    ... on Isp { no,
                        bus{id,ident,task{id date status dep{id name}}}
                        conclusion,nextIspDate,
                        checkMen{id,username},
                        dev{id,cod,oid}, ispMen{id,username},
                        ispu{id,name},mdtype,mduri,
                        report{id,modeltype,modelversion,type,path,}
                        reps {
                            edges {
                                node {
                                    id,type, path, stm{id,sta,due}, 
                                }
                            }
                        }
                    },
                    __typename
                }
            }
        `,
        props.prepared.query,
    );
    const { node:isp, }=data;
    const theme = useTheme();
    const [repId, setRepId] = React.useState(isp?.dev?.cod);
    const [repNo, setRepNo] = React.useState(isp?.dev?.oid);
    const [isCopied, setCopied] = useClipboard(isp?.no! ||"");

    return (
        <AloneContainer>
            <form  method="post"
                   css={{
                        margin: 'auto',
                        background: "white"
                    }}
                   onSubmit={e =>{
                       e.preventDefault();  //阻止默认post://URL?
                       } }>

                <Text  variant="h5"　css={{ textAlign: 'center' }}>
                    <span>检验详情列表</span>
                </Text>
                <InputLine  label='监察识别码' >
                    <Input  value={repNo!}  placeholder="那一份报告？"
                            onChange={e => setRepNo(e.currentTarget.value) } />
                </InputLine>

                <div css={{
                        margin: 'auto',
                     }}
                >
                    <InputLine  label='报告编号' >
                        <SuffixInput id="diame"  readOnly  onSave={txt=> 0}
                                     type="text"  value={isp?.no! || ""}>
                            <IconButton
                                variant="ghost"
                                icon={isCopied ? <IconZapOff /> : <IconCheckSquare />}
                                label="搜索吧"
                                css={{
                                    // display: name ?  undefined
                                }}
                                onClick={async (e) => {
                                    setCopied();
                                } }
                            />
                        </SuffixInput>
                    </InputLine>
                    { isp?.bus?.task &&
                        <>
                            <RouterLink href={`/task/${isp?.bus?.task?.id}/detail/${isp?.bus?.id}`}>
                                <Button
                                    size="lg" noBind
                                    intent="primary"
                                    variant="ghost"
                                    iconAfter={<IconCloud />}
                                >
                                 存在关联的检验业务
                                </Button>
                            </RouterLink>
                            <Button intent="primary"
                                css={{ marginLeft: theme.spaces.sm }}
                                onPress={() => {
                                    //检验业务: 对应后端的是Detail模型id
                                    sessionStorage['当前检验业务'] =JSON.stringify({task:isp?.bus?.task?.id,detail:isp?.bus?.id});
                                }}
                            >设定为当前检验业务
                            </Button>
                        </>
                    }
                    {isp?.id?
                        <React.Fragment>
                            <InputLine  label='设备编号' >
                                <Input  value={repId!} readOnly={true}
                                        onChange={e => setRepId(e.currentTarget.value) } />
                            </InputLine>

                            {isp?.report?.id?
                                <RouterLink href={`/reportView/${isp?.report?.modeltype}/ver/${isp?.report?.modelversion}/${isp?.report?.id}`}>
                                    <Button
                                        size="lg" noBind
                                        intent="primary"
                                        variant="ghost"
                                        iconAfter={<IconCloud />}
                                    >
                                     搜到的主报告
                                    </Button>
                                </RouterLink>
                                :
                                <>
                                    <Text variant="h5" css={{ textAlign: 'center' }}>
                                        没搜到WEB报告,是旧平台PDF链接形式的吗
                                    </Text>
                                    <OldReportEntrance isp={isp} />
                                </>
                            }
                        </React.Fragment>
                        :
                        <Text variant="h5" css={{ textAlign: 'center' }}>
                            没找到此号
                        </Text>
                    }
                </div>
            </form>
        </AloneContainer>
  );
}

